<template>
    <div style="padding: 20px;font-size: 25px;">
        <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState" @finish="onFinish">
            <a-row :gutter="24">
                <a-col :span="4">
                    <a-form-item name="username" label="发布人员">
                        <a-input v-model:value="formState[`username`]" :placeholder="'请输入发布人员名称'"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item name="platform" label="技师端/客户端">
                        <a-radio-group v-model:value="formState['platform']">
                            <a-radio-button value="">全部</a-radio-button>
                            <a-radio-button value="0">客户端</a-radio-button>
                            <a-radio-button value="1">技术端</a-radio-button>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item name="status" label="状态">
                        <a-radio-group v-model:value="formState['status']">
                            <a-radio-button value="">全部</a-radio-button>
                            <a-radio-button value="0">正常</a-radio-button>
                            <a-radio-button value="1">下架</a-radio-button>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item name="way" label="展示方式">
                        <a-radio-group v-model:value="formState['way']">
                            <a-radio-button value="">全部</a-radio-button>
                            <a-radio-button value="0">滚动</a-radio-button>
                            <a-radio-button value="1">弹窗</a-radio-button>
                        </a-radio-group>
                    </a-form-item>
                </a-col>

            </a-row>
            <a-row>
                <a-col :span="10" style="text-align: left">
                    <a-button type="primary" @click="adds">新增</a-button>

                </a-col>
                <a-col :span="14" style="text-align: right">
                    <a-button type="primary" html-type="submit">查询</a-button>
                    <a-button style="margin: 0 8px" @click="() => { formRef.resetFields(); onFinish() }">重置</a-button>

                </a-col>
            </a-row>
        </a-form>
        <a-table bordered :data-source="dataSource" :columns="columns"
            :pagination="{ current, pageSize, total: totalCount }" @change="pageClick">
            <template #bodyCell="{ column, text, record }">

                <template v-if="column.dataIndex == 'image'">
                    <a-image :width="100" :heigth="100" :src='share.http + `/${record.dir}/${record.image}`' />
                </template>
                <template v-if="column.dataIndex === 'operation'">
                    <a-popconfirm :title="'真的要删除吗'" @confirm="deleTraffic(record.uid)">
                        <a :style="{ color: share.color, marginLeft: '15px' }">删除</a>
                    </a-popconfirm>
                    <span :style="{ marginLeft: '15px', color: share.color }" @click="xqModal(record)">详情</span>
                    <span :style="{ marginLeft: '15px', color: share.color }" @click="showModal(record)">修改</span>
                </template>
                <template v-if="column.dataIndex == 'status'">
                    <span style="color:green" v-if="record.status == 0">正常</span>
                    <span style="color:red" v-if="record.status == 1">下架</span>
                </template>
                <template v-if="column.dataIndex == 'way'">
                    <span style="color:green" v-if="record.way == 0">滚动</span>
                    <span style="color:red" v-if="record.way == 1">弹窗</span>
                </template>
                <template v-if="column.dataIndex == 'platform'">
                    <span :style="{ color: share.color }" v-if="record.platform == 1">技师端</span>
                    <span :style="{ color: share.color }" v-if="record.platform == 0">客户端</span>
                </template>

            </template>
        </a-table>
    </div>
    <!-- 文本新增 -->
    <a-modal v-model:visible="addModel" title="文本新增" :width="850" @ok="addOk" :destroyOnClose="true">
        <a-form ref="addForm" :model="addFormState">
            <a-form-item label="文本标题" name="title" :rules="[{ required: true, message: '请输入标题' }]">
                <a-input v-model:value="addFormState.title" :maxlength="200" />
            </a-form-item>

            <a-form-item label="跳转链接" name="url" :rules="[{ required: true, message: '请输入跳转链接' }]">
                <a-input v-model:value="addFormState.url" addon-before="Http://" />
            </a-form-item>

            <a-form-item name="platform" label="选择平台" :rules="[{ required: true, message: '请选择平台' }]">
                <a-radio-group v-model:value="addFormState.platform">
                    <a-radio :value="0">客户端</a-radio>
                    <a-radio :value="1">技师端</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item name="status" label="选择状态" :rules="[{ required: true, message: '请输入状态' }]">
                <a-radio-group v-model:value="addFormState.status">
                    <a-radio :value="0">正常</a-radio>
                    <a-radio :value="1">下架</a-radio>
                </a-radio-group>
            </a-form-item>

            <a-form-item name="way" label="选择展示方式" :rules="[{ required: true, message: '请选择展示方式' }]">
                <a-radio-group v-model:value="addFormState.way">
                    <a-radio :value="0">滚动</a-radio>
                    <a-radio :value="1">弹窗</a-radio>
                </a-radio-group>
            </a-form-item>

            <a-form-item label="选择跳转方式" name="opentype" :rules="[{ required: true, message: '请选择跳转方式' }]">
                <a-select v-model:value="addFormState.opentype" placeholder="选择跳转方式">
                    <a-select-option value="navigate">(navigate) 保存当前页面跳转到指定页</a-select-option>
                    <a-select-option value="redirect">(redirect) 关闭当前页面，跳转到应用内的某个页面</a-select-option>
                    <a-select-option value="switchTab">(switchTab) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面</a-select-option>
                    <a-select-option value="reLaunch">(reLaunch) 关闭所有页面，打开到应用内的某个页面</a-select-option>
                    <a-select-option value="navigateBack">(navigateBack) 关闭当前页面，返回上一页面或多级页面</a-select-option>
                </a-select>
            </a-form-item>

            <a-form-item name="content" label="文本主要内容"
                :rules="[{ required: true, message: '请输入内容' }, { validator: validateContent }]">
                <a-textarea v-model:value="addFormState.content" />
            </a-form-item>
        </a-form>
    </a-modal>
    <!-- 文本修改 -->
    <a-modal v-model:visible="setModel" title="文本新增" :width="850" @ok="setOk" :destroyOnClose="true">
        <a-form ref="setForm" :model="setFormState">
            <a-form-item label="文本标题" name="title" :rules="[{ required: true, message: '请输入标题' }]">
                <a-input v-model:value="setFormState.title" :maxlength="200" />
            </a-form-item>


            <a-form-item label="跳转链接" name="url" :rules="[{ required: true, message: '请输入跳转链接' }]">
                <a-input v-model:value="setFormState.url" addon-before="Http://" />
            </a-form-item>

            <a-form-item name="status" label="选择状态" :rules="[{ required: true, message: '请输入状态' }]">
                <a-radio-group v-model:value="setFormState.status">
                    <a-radio :value="0">正常</a-radio>
                    <a-radio :value="1">下架</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item name="platform" label="选择平台" :rules="[{ required: true, message: '请选择平台' }]">
                <a-radio-group v-model:value="setFormState.platform">
                    <a-radio :value="0">客户端</a-radio>
                    <a-radio :value="1">技师端</a-radio>
                </a-radio-group>
            </a-form-item>

            <a-form-item name="way" label="选择展示方式" :rules="[{ required: true, message: '请选择展示方式' }]">
                <a-radio-group v-model:value="setFormState.way">
                    <a-radio :value="0">滚动</a-radio>
                    <a-radio :value="1">弹窗</a-radio>
                </a-radio-group>
            </a-form-item>

            <a-form-item label="选择跳转方式" name="opentype" :rules="[{ required: true, message: '请选择跳转方式' }]">
                <a-select v-model:value="setFormState.opentype" placeholder="选择跳转方式">
                    <a-select-option value="navigate">(navigate) 保存当前页面跳转到指定页</a-select-option>
                    <a-select-option value="redirect">(redirect) 关闭当前页面，跳转到应用内的某个页面</a-select-option>
                    <a-select-option value="switchTab">(switchTab) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面</a-select-option>
                    <a-select-option value="reLaunch">(reLaunch) 关闭所有页面，打开到应用内的某个页面</a-select-option>
                    <a-select-option value="navigateBack">(navigateBack) 关闭当前页面，返回上一页面或多级页面</a-select-option>
                </a-select>
            </a-form-item>

            <a-form-item name="content" label="文本主要内容"
                :rules="[{ required: true, message: '请输入内容' }, { validator: validateContent }]">
                <a-textarea v-model:value="setFormState.content" />
            </a-form-item>
        </a-form>
    </a-modal>
    <!-- 轮播图详情 -->
    <a-modal v-model:visible="xqModel" title="优惠卷详情" :width="740" @ok="xqOk" :destroyOnClose="true">
        <div class="xqBox">
            <div class="title">标题:</div>
            <span class="value">{{ xqData.title }}</span>


            <div class="title">状态:</div>
            <span class="value" v-if="xqData.status == 0">正常</span>
            <span class="value" v-if="xqData.status == 1">下架</span>


            <div class="title">发布平台:</div>
            <span class="value" v-if="xqData.platform == 0">客户端</span>
            <span class="value" v-if="xqData.platform == 1">技师端</span>

            <div class="title">展示方式:</div>
            <span class="value" v-if="xqData.opentype =='navigate'">(navigate) 保存当前页面跳转到指定页</span>
            <span class="value" v-if="xqData.opentype =='redirect'">(redirect) 关闭当前页面，跳转到应用内的某个页面</span>
            <span class="value" v-if="xqData.opentype =='switchTab'">(switchTab) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面</span>
            <span class="value" v-if="xqData.opentype =='reLaunch'">(reLaunch) 关闭所有页面，打开到应用内的某个页面</span>
            <span class="value" v-if="xqData.opentype =='navigateBack'">(navigateBack) 关闭当前页面，返回上一页面或多级页面</span>


            <div class="title">发布人员</div>
            <span class="value">{{ xqData.username }}</span>


            <div class="title">跳转链接</div>
            <span class="value" style="color:#333">{{ xqData.url }}</span>


            <div class="title">发布日期:</div>
            <span class="value">{{ xqData.release_date }}</span>

            <div class="title" style="width:20%">具体内容:</div>
            <a-textarea :width="100" :value="xqData.content" disabled/>



        </div>
    </a-modal>
</template>


<script setup>
import { ref, onMounted, reactive } from 'vue'

import { useUserData } from '../../../stores/userData';
import { useRouter } from 'vue-router';
import share from '../../../util/commnet'
import { message } from 'ant-design-vue';
import { textAPI } from '../../../api/set'
import {debounce} from 'lodash'


const router = useRouter();  //路由
const store = useUserData();    //pinia


const dataSource = ref([{}]);  //表格数据

const validateContent = (rule, value) => {          //验证规则
    if (value && value.indexOf('|') !== -1) {
        return Promise.reject('存在特殊字符|');
    } else {
        return Promise.resolve();
    }
}




const columns = [
    {
        title: '文本内容',
        dataIndex: 'content',
        width: "200px",
        align: 'center',
        ellipsis: true
    }, {
        title: '发布平台',
        dataIndex: 'platform',
        align: 'center'

    }, {
        title: '状态',
        dataIndex: 'status',
        align: 'center'

    }, {
        title: "展示方式",
        dataIndex: "way",
        align: "center"
    }, {
        title: "发布时间",
        dataIndex: 'release_date',
        align: 'center'

    }, {
        title: '发布人',
        dataIndex: 'username',
        align: 'center'

    }, {
        title: '操作',
        dataIndex: 'operation',
        align: 'center'

    }];


const totalCount = ref(0);      //总条
const pageSize = ref(10);       //一页多少条
const current = ref(1);         //当前页
const formState = reactive({
    status: '',
    username: '',
    platform: '',
    way: ""
});
const formRef = ref('');  //查询的ref
const onFinish = async () => {  //当点击查询
    pageClick();
}


const debouncedPageClick = debounce(async (item) => {           //进行防抖
    item ? current.value = item.current : current.value = 1;
    let res = await textAPI(`sel|${formState.platform}|${formState.status}|${formState.username}|${pageSize.value}|${current.value}|${formState.way}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    console.log(res);
    if (!res || res.code == 406) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }
    dataSource.value = res.data;
    totalCount.value = res.total - 0;
}, 300);

const pageClick = (item) => {       //页面变化刷新表格`
    debouncedPageClick(item);
};



// 添加操作-----------------------------------------------------------------------
const addModel = ref(false); //新增广告图片
const addForm = ref(null);
const addFormState = reactive({
    url: '',   //跳转链接
    title: '',       //标题
    platform: 0,     //选择平台
    status: 0,       //状态
    way: 0,           //展示方式
    content: "",        //内容
    opentype:"navigate"         //选择跳转方式

})
const adds = () => {
    addModel.value = true;
}

const addEnd = () => {

    addFormState.way = 0;
    addFormState.content = ""
    addFormState.url = '';
    addFormState.abstract = '';
    addFormState.title = '';
    addFormState.platform = 0;
    addFormState.status = 0;
    addFormState.image = '';
    addFormState.opentype = "navigate"
    addModel.value = false;
}

const addOk = () => {      //当新增完成
    addForm.value.validateFields()
        .then(async res => {

            let addData = await textAPI(`add|${addFormState.title}|${addFormState.way}|${addFormState.platform}|${addFormState.status}|${addFormState.url}|${store.data.uid}|${addFormState.content}|${addFormState.opentype}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
            console.log(addData);
            if (!addData || addData.code == 406) {                //验证账号状态
                router.replace({ name: 'login' });
                message.error("账号失效", 3)
                return;
            } else if (addData.code != 200) {
                message.error(res.message);
                return
            }
            message.success("新增成功")
            pageClick();
            addEnd()

        })

}


// 修改操作-----------------------------------------------------------------
const setModel = ref(false); //新增广告图片
const setForm = ref(null);
const setFormState = ref({
    url: '',   //跳转链接
    title: '',       //标题
    platform: 0,     //选择平台
    status: 0,       //状态
    way: 0,           //展示方式
    content: "",        //内容
    opentype:"navigate"         //选择跳转方式
})
const copys = ref({});  //保存一份初始文件 以防未改动的情况

const showModal = (item) => {
    console.log(item);
    item.way -=0;
    item.status -=0;
    item.platform -=0;
    setFormState.value = item;
    copys.value = item
    setModel.value = true;
}

const setEnd = () => {
    setFormState.value = {};
    copys.value = {};
    setModel.value = false;
}
const setOk = () => {
    setForm.value.validateFields()
    .then(async res => {
        if (share.compareObjects(setFormState.value,copys.value)) {  //是否发生修改
            let setData = await textAPI(`set|${setFormState.value.title}|${setFormState.value.way}|${setFormState.value.platform}|${setFormState.value.status}|${setFormState.value.url}|${store.data.uid}|${setFormState.value.content}|${setFormState.value.opentype}|${setFormState.value.uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
            if (!setData || setData.code == 406) {                //验证账号状态
                router.replace({ name: 'login' });
                message.error("账号失效", 3)
                return;
            } else if (setData.code != 200) {
                message.error(res.message);
                return
            }
            message.success("修改成功");
            pageClick();
            setEnd();
        } else {          //当没有上传文件
            setEnd();
        }
    })
}


// 删除操作------------------------------------------------------------------
const deleTraffic = async (uid) => {
    let res = await textAPI(`del|${uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    console.log(res);
    if (!res || res.code == 406) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }
    message.success(res.message);
    pageClick();
}

// 查看操作-----------------------------------------------------------------------
const xqModel = ref(false);
const xqData = ref({});
const xqOk = () => {
    xqModel.value = false;
}
const xqModal = (item) => {
    xqModel.value = true;
    xqData.value = item;
}

onMounted(async () => {
    let res = await textAPI(`sel||||${pageSize.value}|${current.value}||${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    console.log(res);
    if (!res || res.code == 406) {                //验证账号状
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }
    dataSource.value = res.data;
    totalCount.value = res.total - 0;
})

</script>


<style scoped src="../../css/set/bannerText.scss" />
